import { Component } from 'react';
import './list.scss'
class List extends Component {

    state = {
        arr: []
    }
    del = (e) => {
        console.log(e);
        this.props.arr.splice(e, 1)
        this.setState({
            arr: this.props.arr
        })
    }
    render() {
        return (<>
            <button className='qk'>清空</button>
            <div className='list'>
                <ul>
                    {/* {this.state.arr.map((item, index): Element => {
                        return (
                            <li key={index}><span style={{ color: index = 0 ? 'red' : 'yellow' }}>{index + 1}</span>{item}</li>
                        )
                    })} */}
                    {
                        this.props.arr.map((item, index): Element => {
                            return (<li key={index}>
                                <h4>评论人: <span>{item.commentator}</span></h4>
                                <div className='list_data'>
                                    评论内容: <span>{item.commentData}</span>
                                    <button onClick={() => this.del(index)}>删除评论</button>
                                </div>
                            </li>)
                        })
                    }

                </ul>
            </div>
        </>);
    }
}

export default List;